<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AutoComplete Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../../widgets/autocomplete/autocomplete.css" type="text/css"/>
    <link href="../../../ui/scrollpanel/scrollpanel.css" type="text/css" rel="stylesheet"/>
    <link href="../../../theme/default/style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    .sdk-autocomplete-demo .qs-ui-ipt {
	    width: 90px;
	}
	.sdk-autocomplete-demo .qs-ui-btn {
	    border-color: #CCCCCC;
	    height: auto;
	    line-height: 19px;
	    margin-left: -1px;
	    padding: 0 3px;
	}
	.sdk-autocomplete-log{
	    background: none repeat scroll 0 0 #FFFFFF;
	    border: 1px solid #CCCCCC;
	    height: 100px;
	    width: 500px;
	    margin-top: 8px;
	    min-width: 146px;
	    overflow-x: hidden;
	    overflow-y: auto;
	    padding: 2px;
	}
	.qs-ui-btn.go {
	    background: none repeat scroll 0 0 transparent;
	    font-size: 86%;
	    height: auto;
	    margin: 0;
	    min-width: 24px;
	    padding: 0;
	    text-align: center;
	    vertical-align: middle;
	}
    .qs-ui-btn{height:auto;line-height:19px;padding:0 3px;border-color:#ccc;margin-left:-1px;}
    </style>
</head>
<body>
    <div class="sdk-autocomplete-demo">
    	<div class="sdk-autocomplete-toolContainer">
    		<h3>Callback</h3>
            <div class="sdk-autocomplete-log">
    
            </div>
    	</div>
    	<div class="sdk-autocomplete-container1">
    	</div>
    	<div class="sdk-autocomplete-container2">
    		<input type="text" id="autocomplete" class="sdk-autocomplete-input"><a class="qs-ui-btn go" value="go" href="javascript:void(0)">GO</a>
    	</div>
    </div>
	<script type="text/javascript" src="../../../lib/jquery.js"></script>
    <script type="text/javascript" src="../../../lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../../../lib/migratory-jslib.js"></script>
    <script type="text/javascript" src="../../../common/common.js"></script>
	<script type="text/javascript" src="../../../core/common.js"></script>
	<script type="text/javascript" src="../../../core/permissionChecker.js"></script>
	<script type="text/javascript" src="../../../core/SDKDataManager.js"></script>
	<script type="text/javascript" src="../../../core/tickers.js"></script>
	<script type="text/javascript" src="../../../core/dataHandler.js"></script>
	<script type="text/javascript" src="../../../core/pull.js"></script>
	<script type="text/javascript" src="../../../core/push.js"></script>
	<script type="text/javascript" src="../../../core/subscriber.js"></script>  
	<script type="text/javascript" src="../../../theme/default/style.js"></script>
	<script type="text/javascript" src="../../../ui/util/util.js"></script>
    <script type="text/javascript" src="../../../ui/scrollpanel/scrollpanel.js"></script>
    <script type="text/javascript" src="../../../widgets/autocomplete/autocomplete.js"></script>
    <script type="text/javascript">
		//callback
        var logContainer=$(".sdk-autocomplete-log");
        logContainer.bind("dblclick",function(e){
            $(this).html("");
        });
        var log =function(title,json,isJosn){
            var str="";
            if(isJosn){
                for(var key in json){
                    str+=key+":"+json[key]+"<br/>";
                }
            }else{
                str=json;
            }
            logContainer.prepend("<h4>"+title+"</h4>"+str);
        }
    	$(document).ready(function(){
    		QSAPI.init('DISN');
    		QSAPI.Authentication.login("511F1BFFABACF2797D53014B7B7EF29F502E7015781E8D93A04989A70197E422B9AC0FE2E59882CDC9713E118EEA680F7F0E859C73FBD6BEF64C7DD04490EF1A","62D2A0641B01FBF65FA127365CDC0DC427458A67D958FC979718FF067CCD1A8D8D4E839255D60957C1A502D25C724A1D65F6EEE07636A0AA84E8F51C8D1831EE",{
    			onSuccess:function(result){ 
    				var acb = new QSAPI.Widget.AutoComplete($('body'),{},{
		    			onClick:function(TickerList){
		    				log("onClick",{tickerList:TickerList},true);
		    			},
		    			onLoad:function(data){
		    				log("onLoad",data,false);
		    			},
		    			onHeightChange:function(data){
		    				log("onHeightChange",data,true);
		    			}
		    		},"acb_test_2");
		    		acb.subscribe("autocomplete");
		    		$(".go").bind("click",function(e){
		    			acb.trigger("autocomplete");
		    		});
    			}
    		});
    	});
    </script>
</body>
</html>